<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //js基于原型的语法；
        /*
        题目
            如何准确判断一个变量是不是数组？
                a instanceof Array
            手写一个简易的jQuery，考虑插件的扩展性

            class的原型本质，怎么理解？
        
        */

        /*
            知识点：
                class和继承

                类型判断instanceof

                原型和原型链；
        */

        /*
            class 
                constructor

                属性

                方法；
        */
        /*
            //继承；
           1 extends 
            2super 
           3 扩展或重写方法
    
        */
        /*
            //类型判断-instanceof  //
            xialuo instanceof Student //true
            xialuo instanceof People //true
            xialuo instanceof Object //true

            [] instanceof Array //true
            [] instanceof Object //true

            {} instanceof Object //true
        */

        /*
            原型：
            class 实际上是函数，可见是语法糖
            typeof People // 'function'
            typeof Student // 'function'

            //隐式原型和显示原型
            console.log(xialuo.__proto__)
            console.log(Student.prototype)
            console.log(xialuo.__proto__ === Student.prototype)//ture
        */
        /*
            原型：
            class 实际上是函数，可见是语法糖
            typeof People // 'function'
            typeof Student // 'function'

            //隐式原型和显示原型
            console.log(xialuo.__proto__)
            console.log(Student.prototype)
            console.log(xialuo.__proto__ === Student.prototype)//ture
        */
        /*
            原型图：
        */
        /*
            原型关系：
            每个class 都有显示原型prototype
            每个实例都有隐式原型 __proto__
            实例的__proto__指向对应的class的prototype
        */
        /*
            基于原型的执行规则
            获取属性xialuo.name 或执行方法xialuo.sayhi()时
            先在自身属性的方法寻找
            如果找不到则自动去__proto__中查找；
        */

        /*
            原型链
            console.log(Student.prototype.__proto__)
            console.log()
        */
    </script>
    <script>
        //代码演示
        // class Student{
        //     constructor(name,number){
        //         this.name = name;
        //         this.number = number;
        //     }
        //     sayHi(){
        //         console.log(`姓名 ${this.name},学号${this.number}`)
        //     }
        // }
        // const xialuo = new Student('夏洛',100)
        // console.log(xialuo)
        // console.log(xialuo.name)
        // console.log(xialuo.number)
        // xialuo.sayHi()
    </script>
    <script>
        //父类
            class People{
                constructor(name) {
                    this.name = name
                }
                eat(){
                    console.log(`姓名 ${this.name},eat something`)
                }
            }
        //子类
            class Student extends People {
                constructor(name,number){
                    super(name)
                    this.number = number
                }
                sayHi(){
                    console.log(`姓名 ${this.name},学号${this.number}`)
                }
            }

            class Teacher extends People {
                constructor(name,major){
                    super(name)
                    this.major = major
                }
                teach(){
                    console.log(`老师 ${this.name},教授${this.major}`) 
                }
            }
            const xialuo = new Student('夏洛',100)
        console.log(xialuo)
        console.log(xialuo.name)
        console.log(xialuo.number)
        xialuo.sayHi()
    </script>
    <script>
        //jquery
        class jQuery{
            constructor(selector){
                const result = document.querySelectorAll(selector)
                const length = result.length
                for(let i=0;i<length;i++){
                    this[i]= result[i]
                }
                this.length = length

                //类似于数组
            }
            get(index){
                return index
            }
            each(fn){
                for(let i =0;i<this.length;i++){
                    const elem = this[i]
                    fn(elem)
                }
            }
            on(type,fn){
                return this.each(elem => {
                    elem.addEventListener(type,fn,false)
                })
            }
        } 

        //插件
        jQuery.prototype.dialog = function(info){
            alert(info)
        }

        //复写
        class MyJquery extends jQuery {
            constructor(selector){
                super(selector)
            }
            //扩展自己的新方法
            addClass(className){
                
            }
        }
    </script>
</body>
</html>